<template>
  <div class="word-viewer">
    <div class="word-node" v-for="node in nodes" :key="node.id" :nodeid="node.id">
      <div v-if="node.type === 'directory'">{{ node.name }}</div>
      <div class="word-content" v-else-if="node.type === 'leaf'">
        <template v-for="(c, i) in node.content" :key="i">
          <div v-if="c.type === 'string'">{{ c.value }}</div>
          <File v-else :path="c.value" />
        </template>
      </div>
      <WordViewer :nodes="node.nodes" />
    </div>
  </div>
</template>

<script>
import File from '../meta/File.vue'

export default {
  name: 'WordViewer',
  components: { File },
  props: {
    nodes: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped lang="less">
.word-viewer {
  position: relative;
  margin-bottom: 5px;
  .word-content {
    font-size: 14px;
  }
  .word-node {
    position: relative;
  }
}
</style>
